<template>
  <b style="color:red;font-size:20px">注意: </b>在加载连接线时，要先添加完普通节点后再添加连接线，否则连接线会找不到对应的图案从而导致连线失败<br />
  <br />

  <canvas
    id='connect'
    class="shadow"
  ></canvas>

</template>

<script setup>
import { init } from "@/home/common.js";
import { connectNodes, connectExample } from "@/home/node-example.js";
import { onMounted } from "vue";

let connect;
let width = 400;
let height = 300;

onMounted(() => {
  let shareDom = document.getElementById("connect");

  if (!connect)
    connect = init(
      {
        width: width,
        height: height,
      },
      shareDom
    );

  // 1. 先添加节点
  for (let i of connectNodes) {
    connect.addNode(i);
  }
  // 2. 添加连接线
  for (let i of connectExample) {
    connect.addConnect(i);
  }
});
</script>

<style scoped>
</style>